import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class Header extends Component {
  goBack = () => {
    this.props.history.goBack();
  };

  goForward = () => {
    this.props.history.goForward();
  };

  render() {
    // console.log("About 组件收到的是props是====》", this.props);
    return (
      <div className="header-box">
        <p className="title-text">我是header头部信息</p>
        <hr />

        <button onClick={this.goBack}> 回退</button>
        <button onClick={this.goForward}>前进</button>
        <br />
        <br />
        <br />
      </div>
    );
  }
}

// withRouter 可以加工一般组件，让他具备路由组件所特有的api，并且返回是一个新的组件
export default withRouter(Header);
